<!-- components/custom-tabbar.vue -->
<template>
	<view class="tabbar-container">
		<!-- 选项卡内容 -->
		<view class="tabbar-content" :style="{ height: height + 'rpx', backgroundColor: backgroundColor }">
			<view v-for="(item, index) in tabList" :key="index" class="tab-item" @click="switchTab(item)">
				<!-- 普通tabbar开始 -->
				<image class="tab-icon" :src="currentPage === item.page ? item.selectedIcon : item.icon"
					v-if="item.type == 'tabbar'" mode="widthFix" />
				<text class="tab-text" :style="{ color: currentPage === item.page ? activeColor : inactiveColor }"
					v-if="item.type == 'tabbar'">{{ item.text }}</text>
				<!-- 普通tabbar结束 -->
				<!-- 特殊tabbar开始 -->
				<image class="tab-icon-special" :src="item.iconUrl" v-if="item.type == 'jumpto'" @click.stop="showType"
					mode="widthFix" />
				<!-- 特殊tabbar结束 -->
			</view>
		</view>
		<u-popup :show="showBottom" mode="bottom" :safeAreaInsetBottom="true" @close="close">
			<view class="ul dis aic jcsb">
				<view class="li dis aic " @click.stop="postText">
					<image src="@/static/image/Post.png" mode="widthFix" class="icon" />
					<view>
						<view class="lable">发帖子</view>
						<view class="lablenmae">发布动态</view>
					</view>
				</view>
				<view class="li dis aic " @click.stop="runErrands">
					<image src="@/static/image/runErrands.png" mode="widthFix" class="icon" />
					<view>
						<view class="lable">发跑腿</view>
						<view class="lablenmae">帮拿快递外卖等</view>
					</view>
				</view>

			</view>
		</u-popup>


		<!-- 底部安全区域 -->
		<view class="safe-area" />
	</view>
</template>

<script>
	export default {
		props: {
			// 当前页面标识
			currentPage: {
				type: String,
				required: true,
				default: 'home'
			},
			// 选项卡配置
			tabList: {
				type: Array,
				default: () => {
					return [{
							page: 'home',
							text: '首页',
							icon: '/static/tabs/0.png',
							selectedIcon: '/static/tabs/00.png',
							pagePath: '/pages/index/index',
							type: 'tabbar'
						},
						{
							page: 'find',
							text: '发现',
							icon: '/static/tabs/1.png',
							selectedIcon: '/static/tabs/11.png',
							pagePath: '/pages/find/find',
							type: 'tabbar'
						},
						{
							iconUrl: '/static/tabs/99.png',
							type: 'jumpto'
						},
						{
							page: 'msg',
							text: '消息',
							icon: '/static/tabs/2.png',
							selectedIcon: '/static/tabs/22.png',
							pagePath: '/pages/msg/msg',
							type: 'tabbar'
						},
						{
							page: 'my',
							text: '我的',
							icon: '/static/tabs/3.png',
							selectedIcon: '/static/tabs/33.png',
							pagePath: '/pages/my/my',
							type: 'tabbar'
						},
					]
				}
			},
			// 自定义参数
			height: {
				type: Number,
				default: 150
			},
			backgroundColor: {
				type: String,
				default: '#ffffff'
			},
			activeColor: {
				type: String,
				default: '#000000'
			},
			inactiveColor: {
				type: String,
				default: '#A39CC6'
			}
		},
		data() {
			return {
				showBottom: false,
			}
		},
		methods: {
			switchTab(item) {
				if (this.currentPage === item.page) return
				uni.reLaunch({
					url: item.pagePath
				})
			},
			showType() {
				this.showBottom = true
			},
			close() {
				console.log('close');
				this.showBottom = false
			},
			runErrands() {
				this.showBottom = false
				uni.navigateTo({
					url: '/pages/home/runErrands'
				})
				console.log('点击跑腿');
			},
			postText() {
				this.showBottom = false
				uni.navigateTo({
					url: '/pages/home/postAThread'
				})
				console.log('点击发帖');
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tabbar-container {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 999;

		.tabbar-content {
			display: flex;
			align-items: center;
			box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);

			.tab-item {
				flex: 1;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				.tab-icon {
					width: 50rpx;
					margin-bottom: 2px;
				}

				.tab-icon-special {
					width: 106rpx;
					margin-bottom: 2px;
				}

				.tab-text {
					font-size: 10px;
					line-height: 1.2;
					margin-top: 4rpx;
				}
			}
		}

		/* 安全区域适配 */
		.safe-area {
			height: env(safe-area-inset-bottom);
			background-color: #fff;
		}
	}

	.ul {
		padding: 42rpx 25rpx;

		.li {
			width: 340rpx;
			height: 118rpx;
			background: #F8F8F9;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			padding: 14rpx 10rpx;
			box-sizing: border-box;

			.icon {
				width: 100rpx;
				margin-right: 18rpx;
			}

			.lable {
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 28rpx;
				color: #000000;
			}

			.lablenmae {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #8C8C92;
			}
		}
	}
</style>